<template>
   <section class="entry-table">
     <el-table ref="detail" :row-class-name="tableRowClassName" :expand-row-keys="expandList" :data="data" border :show-header="false" row-key="col9Title" :span-method="arraySpanMethod" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @row-click="rowClick">
          <el-table-column prop="col0Title" label=""  align="center"/>
          <el-table-column prop="col1Title" label=""  align="center"/>
          <el-table-column prop="col2Title" label=""  align="center"/>
          <el-table-column prop="col3Title" label=""  align="center"/>
          <el-table-column prop="col4Title" label=""  align="center"/>
          <el-table-column prop="col5Title" label=""  align="center"/>
          <el-table-column prop="col6Title" label=""  align="center"/>
          <el-table-column prop="col7Title" label=""  align="center"/>
          <el-table-column prop="col8Title" label=""  align="center"/>
     </el-table>
  </section>
</template>

<script>
export default {
  data() { return {
     expandList: []
  } },
  props: {
      data: {
          type: Array,
          value: null
      }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      const result = [1, 1];
      if (row.colSpans !== undefined && row.columnIndexs) {
        const index = row.columnIndexs.indexOf(columnIndex);
        if (index !== -1) {
         result[1] = row.colSpans[index];
        } else {
         result[1] = 0;
        }
      }

      if (row.rowSpans !== undefined && row.rowMerge && row.rowColumnIndexs) {
               const colIndex = row.rowColumnIndexs.indexOf(columnIndex);
               if (colIndex !== -1) {
                 result[0] = row.rowSpans[colIndex];
               } 
              
      }

      return result;
    },
    rowClick(row) {
      // console.log(this.expandList);
      // this.expandList.push(row.col8Title)
    },
    tableRowClassName({row, rowIndex}) {
        if (row.col0Title === '期初值' || row.col0Title === '期末值') {
          return 'warning-row';
        }
        return '';
      }
  },
};
</script>
<style>
.el-table .warning-row {
    background: #fdf5e6;
  }
</style>
